<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        * {
            padding: 0;
            margin: 0;
        }

        body {
            perspective: 800px;
            transform-style: preserve-3d;
            perspective-origin: 300px 300px;
        }

        div {
            position: absolute;
            width: 200px;
            height: 200px;
            left: 200px;
            top: 200px;
            background-image: url("./pic1.jpeg");
            background-size: cover;
            transform-origin: center center;
            /* 坐标原点在中心有利于观察skew */

            transform: skew(0deg, 0deg);
            /* 
             填的是角度，都写0度没变化，注意哦，0deg那也不是默认值
             
             第一个值是沿着X轴的方向倾斜，负值反向倾斜
             沿x轴倾斜，其实倾斜的是y轴，上下两条边一直保持水平方向，并且两条水平线距离不变

             第二个值是沿着Y轴的方向倾斜，负值反向倾斜

             角度的物理意义是：
             沿x轴倾斜5deg，像素点沿x轴向右或向左偏移，与原点的连线与原始位置与原点的连线成的角度为5deg
             沿y轴倾斜，意义一样

             注意：沿x轴倾斜会导致y轴变成倾斜的，想象y轴的刻度都是水平移动的，这就导致y轴刻度被拉长了，并且拉长的倍数和角度有关系
            */


            transform: skew(45deg, 0deg) translateX(100px);
            transform: skew(45deg, 0deg) translateY(100px);
            /* 
             会造成坐标轴的倾斜，注意对后续其它变换是有影响的
             首先沿x轴方向扭曲45度，然后平移
             沿x轴方向扭曲会改变y坐标轴的方向，所以会改变沿y轴平移的方向
             而沿x轴平移仍然是水平方向的

            */

            transform: skewX(45deg);
            transform: skew(45deg, 0deg);
            /* 单独设置沿x轴的倾斜，上面两者一样 */

            transform: skewY(45deg);
            /* 单独设置沿y轴的倾斜 */
        }


    </style>
</head>
<body>
    <div></div>
</body>
</html>